﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>

    </title>
    <link href="../../Design/bootstrap.css" rel="stylesheet" />
    <script src="../../Scripts/jquery-2.1.0.min.js"></script>
    <script src="../../Scripts/jquery.dataTables.js"></script>
    <script src="../../Scripts/bootstrap.min.js"></script>
    <script src="../../Scripts/handlebars-v1.3.0.js"></script>
    <script src="../../Scripts/custom.js"></script>
    <script src="../../Scripts/jquery.tabletojson.min.js"></script>
    
</head>
<body>
    <div id="navbar">

    </div>
    <div class="bs-docs-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="page-header">
                        <h1 id="tables">Department List</h1>
                    </div>

                    <div class="bs-example table-responsive">
                        <table class="table table-striped table-hover " id="example">
                            <thead class="table-bordered">
                                <tr class="h3 info ">
                                    <td>Department Name</td>
                                    <td>Department Contact </td>
                                    <td>Department Fax</td>
                                    <td>Department Collection Point </td>
                                </tr>
                            </thead>
                            <tbody class="h4" id="dlist"></tbody>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
  
    <!--<table id="example">
        <thead>
            <tr>
                <td>Department Name</td>
                <td>Department Contact </td>
                <td>Department Fax</td>
                <td>Department Collection Point </td>
            </tr>
        </thead>
        <tbody id="dlist"></tbody>
    </table>-->
    <div id="footer" class="container">

    </div>


    <!-----custom scripts------>
    <script>
        $(function () {

            //-------Injecting navbar template-------//
            includes("storenavbar_Tmpl", {}, "#navbar");
            //-------End of Injecting navbar template-------//
            

            var uri = "dep/getdeplist";
            $.getJSON(uri)
              .done(function (data) {
                  console.log(data);
                  var $tableBody = $("#dlist");
                  $tableBody.empty();
                  var arr = { department: data };
                  var rowTemplate = Handlebars.compile($("#deplist").html());
                  $tableBody.append(rowTemplate(arr));
                  $.each(data, function (key, item) {
                      //    $('<li>', { text: formatItem(item) }).appendTo($('#products'));
                      //});
                  });
                  $('#example').dataTable({
                      "bPaginate": false,
                      "bLengthChange": false,
                      "bFilter": true,
                      "bSort": false,
                      "bInfo": false,
                      "bAutoWidth": false
                  });

              });

            //----adding data-tale functionality---//
           

            //----end of adding data-tale functionality---//

            //-----Injecting footer template-----//
            includes("footer_Tmpl", {}, "#footer");
            //-----End of Injecting footer template-----//
        });
    </script>
    <script id="deplist" type="text/x-handlebars">
        {{#each department}}
        <tr>
            <td>{{this.DepartmentName}}</td>
            <td>{{this.DepartmentContact}}</td>
            <td>{{this.DepartmentFax}}</td>
            <td>{{this.collectionpoint.CollectionPointName}}</td>
        </tr>
        {{/each}}
    </script>
    <!-----end of custom scripts----->
</body>
</html>
